<template>
	<view class="market-detail-page page">
		<swiper :indicator-dots="false" class="top-banner" :autoplay="true">
			<swiper-item v-for="(item,index) in detail.swiperImages">
				<image :key="index" class="banner-item" :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="content-block">
			<view class="white-block title-block">
				<view class="name-block">
					<view class="name">{{detail.title}}</view>
					<view class="price">￥{{detail.price}}</view>
				</view>
				<view class="label">{{detail.account}}</view>
			</view>
			<view class="white-block" style="padding: 0 20rpx;">
				<view class="info-item">
					<view style="font-size: 42rpx;" class="iconfont icon-dianhua1"></view>
					<view class="info-value">{{detail.phone||'暂无联系方式'}}</view>
					<view v-if="detail.phone" @click="call(detail.phone)" class="operate-btn">
						<view class="iconfont iconfont-btn icon-dianhua"></view>拨打
					</view>
				</view>
				<view class="info-item">
					<view class="iconfont icon-dingxiang"></view>
					<view class="info-value">{{detail.address||'暂无位置'}}</view>
					<view v-if="detail.address" @click="openMap(detail.latitude,detail.longitude,detail.address)"
						class="operate-btn">
						<view class="iconfont iconfont-btn icon-daohang"></view>地图
					</view>
				</view>
			</view>
			<view class="white-block">
				<view class="block-title FZHZGBJ">简介</view>
				<view class="content">
					<image mode="widthFix" class="content-image" :src="item"
						v-for="(item,index) in detail.introductions" :key="index"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		marketDetail
	} from '@/api/market';
	export default {
		data() {
			return {
				detail: {
					title: '',
					price: 0,
					account: '',
					phone: '',
					address: '',
					longitude: null,
					longitude: null,
					swiperImages: [],
					introductions: [],
				}
			}
		},
		methods: {
			getDetail(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				marketDetail({
					id: id
				}).then(res => {
					this.detail = res;
				}).catch(() => {
					this.showToast('获取信息失败', () => {
						uni.navigateBack()
					})
				})
			}
		},
		onLoad(opt) {
			if (!opt.id) {
				this.showToast('参数错误', () => {
					uni.navigateBack()
				})
				return;
			}
			this.getDetail(opt.id)
		}
	}
</script>

<style lang="scss" scoped>
	.market-detail-page {
		width: 100%;
		overflow: hidden;

		.top-banner {
			width: 100%;
			height: 500rpx;

			.banner-item {
				width: 100%;
				height: 100%;
			}
		}

		.content-block {
			background: #F7F6F9;
			border-radius: 20px;
			padding: 30rpx;
			margin-top: -60rpx;
			z-index: 1;
			position: relative;

			.white-block {
				background: #fff;
				border-radius: 8px;
				padding: 30rpx 20rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;

				.info-item {
					border-bottom: 1px solid #efefef;
					height: 100rpx;
					display: flex;
					align-items: center;

					.info-value {
						width: calc(100% - 240rpx);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.iconfont {
						font-weight: bold;
						color: #000;
						width: 50rpx;
						font-size: 38rpx;
						margin-right: 20rpx;
					}

					.operate-btn {
						width: 160rpx;
						border-radius: 20px;
						border: 1px solid $theme-color;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: $theme-color;

						.iconfont-btn {
							font-size: 34rpx;
							margin-right: 10rpx;
							width: auto;
							color: $theme-color;
						}
					}
				}

				.info-item:last-child {
					border-bottom: none;
				}

				.block-title {
					margin-bottom: 20rpx;
				}

				.content {
					width: 100%;

					.content-image {
						width: 100%;
					}
				}
			}

			.white-block.title-block {
				justify-content: center;

				.name-block {
					width: 100%;
					display: flex;
					align-items: center;

					.name {
						width: calc(100% - 150rpx);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 34rpx;
						font-weight: bold;
					}

					.price {
						text-align: right;
						width: 150rpx;
						color: $theme-color;
						font-size: 34rpx;
						font-weight: bold;
					}
				}

				.label {
					margin-top: 30rpx;
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}
</style>